<div class="home-container">
  <div class="title-desc">
    <h1 class="ledge-title">- <a href="https://devops.phodal.com/home" class="home-link" target="_blank">LEDGE</a> -</h1>
    <p>
      {{ 'ledge-introduction' | translate}}
    </p>
    <br>
    <p>
      -> <a href="https://gitee.com/phodal/ledge" class="home-link" target="_blank">Gitee</a> or <a href="https://github.com/phodal/ledge" class="home-link" target="_blank">GitHub</a>
    </p>
  </div>

  <div class="home-section period-section">
    <div class="period-title markdown">
      <div class="section-title">「{{ 'it-can' | translate}}」</div>
      <h6 class="center"> - {{ 'homepage.digital-forward' | translate }} - </h6>
      <p class="title intro">{{ 'homepage.devops-period-tooltip' | translate }}</p>
    </div>
    <app-periodic-table
      class="intro-periodic"
      [selectedMetal]="highlightState"
      (currentAtomCategory)="setCurrentAtomCategory($event)"
    >
    </app-periodic-table>
  </div>

  <div class="home-section">
    <div class="section-title">「{{ 'it-can' | translate}}」</div>
    <div class="section-sub-title">- {{ 'homepage.help-you-design-devops' | translate }} -</div>
    <div class="process-title">
      {{ 'homepage.devops-features' | translate }}
    </div>
    <div class="process-content">
      <ledge-markdown-render
        [data]="processTemplate"
        [showScroll]="false"
      ></ledge-markdown-render>
    </div>
    <div class="section-sub-title">- {{ 'homepage.design-by-different' | translate }} -</div>
    <div class="devops-content">
      <p>详见<a href="/case-study/cmb" target="_blank">案例</a></p>
      <ledge-markdown-render
        [data]="devOpsExample"
        [showScroll]="false"
      ></ledge-markdown-render>
    </div>
  </div>

  <div class="home-section">
    <div class="section-title">「{{ 'it-can' | translate}}」</div>
    <div class="section-sub-title">- 帮助您寻找最适合的软件工程技术实践 -</div>
    <div class="section-content">
      <ledge-markdown-render
        class="home-markdown"
        [data]="homemd"
        [showScroll]="false"
      ></ledge-markdown-render>
    </div>
  </div>

  <div class="home-section" ngxInViewport (inViewport)="show($event)">
    <div class="section-title">这就是 Ledge 知识平台</div>
    <div class="section-sub-title">沉淀我们的各种实践，向您提供全程的数据化变革策略、规划与咨询</div>
    <div class="section-content">
      <img src="/assets/images/esp.svg" alt="ESP Modeling"/>
    </div>
  </div>

  <div class="home-section relate">
    <div class="relate-title">{{ 'resources' | translate}}</div>
    <div class="relate-resources">
      <a routerLink="/mobile" class="resource-item">{{ 'mobile' | translate }}</a>
      <a routerLink="/maturity" class="resource-item">{{ 'maturity' | translate }}</a>
      <a routerLink="/report" class="resource-item">{{ 'report' | translate }}</a>
      <a routerLink="/resources" class="resource-item">{{ 'resources' | translate }}</a>
    </div>

    <div class="relate-title">{{ 'toolsets' | translate}}</div>
    <div class="relate-resources">
      <a routerLink="/tool" class="resource-item">{{ 'toolsets' | translate }}</a>
      <a routerLink="/design" class="resource-item">{{ 'design-devops' | translate }}</a>
      <a routerLink="/helper" class="resource-item">{{ 'ledge-editor' | translate }}</a>
      <a routerLink="/checklists" class="resource-item">{{ 'checklists' | translate }}</a>
    </div>
  </div>

  <div class="home-section contribution">
    <ng-container *ngIf="inViewport">
      <div class="section-title">Core Contributors</div>
      <div class="contributors">
        <div class="contributor" *ngFor="let user of users">
          <div class="avatar">
            <a href="{{ user.link }}" target="_blank"
            ><img src="{{ user.avatar }}" alt=""
            /></a>
          </div>
          <div class="username">
            <a href="{{ user.link }}" target="_blank">{{ user.name }}</a>
          </div>
          <div class="title">/{{ user.title }}/</div>
          <div class="work">{{ user.work }}</div>
        </div>
      </div>
      <div class="join-us">
        <section class="section-title">Join us</section>
        <div class="join-us-content section-content">
          <a href="https://gitee.com/phodal/ledge" target="_blank">https://gitee.com/phodal/ledge</a>
          or <a href="https://github.com/phodal/ledge" target="_blank">https://github.com/phodal/ledge</a>
        </div>
      </div>
      <div class="section-more">
        <p>
          还有其他/她优秀的小伙伴也为这个项目做出了巨大的贡献 <br/>
          你可以在<a href="https://github.com/phodal/ledge/graphs/contributors" target="_blank">这里</a>看到所有人的身影
        </p>
        <div class="all-contributors contributors" *ngIf="(allContributors$ | async) as allContributors">
          <div class="contributor" *ngFor="let user of allContributors">
            <div class="avatar small-avatar">
              <a href="{{ user.html_url }}" target="_blank">
                <img src="{{ user.avatar_url }}" alt=""/>
              </a>
            </div>
            <div class="username">
              <a href="{{ user.html_url }}" target="_blank">{{ user.login }}</a>
            </div>
          </div>
        </div>
      </div>
    </ng-container>
  </div>
</div>
<div class="footer"></div>
